<template>
	<div>
	<div class="login">
		

	</div>
	<div class="loginDiv">
			<div class="zy-title">侨创客户管理系统</div>
			<!--<p class="ueselogin">用户登录</p>-->
			<div class="zy-login">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item prop="userName" class="tile">
						<span class="spans"><img src="../../../static/img/input-ico1.png"/></span>
						<el-input type="text" v-model="ruleForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="pass" class="tile">
						<span class="spans"><img src="../../../static/img/input-ico2.png" /></span>
						<el-input type="password" v-model="ruleForm.pass" auto-complete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item style="">
						<el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;height: 41px;">登入</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<p class="copyRight">2017 QuickTech<br>
Copyright © 重庆库克科技</p>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
	export default {
		name: 'login',
		data() {
			return {
				ruleForm: {
					userName: '',
					pass: '',
				},
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3到 10 个字符',
							trigger: 'blur'
						}
					],
					pass: [{
							required: true,
							message: '请选择活动区域',
							trigger: 'change'
						},
						{
							min: 4,
							max: 20,
							message: '长度在 6到 20 个字符',
							trigger: 'blur'
						}
					],
				}
			};
		},
		methods: {
			submitForm(formName) {
				var url = api.login;
				var userName = this.ruleForm.userName
				var userPass = md5(this.ruleForm.pass)
				this.$axios.post(url, {
					"Login": userName,
					"Pwd": userPass,
					"openid":localStorage.openid
				}).then((res) => {
					if(res.data.isOK) {
						localStorage.token = res.data.data.Token;
						localStorage.login = res.data.data.Login;
						localStorage.LoginType = res.data.data.LoginType;
						localStorage.HeadImg = res.data.data.HeadIMG;
//						this.$axios.defaults.headers['token']= sessionStorage.token
						this.$axios.defaults.headers.common['token'] = localStorage.token;
						this.$router.push({
							path: '/index'
						})
					} else {
						this.$message({
							showClose: true,
							message: res.data.msg,
							type: 'error',
							duration: 1000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.login {
		position: absolute;
		width: 100%;
		height: 100%;
		background:url(../../../static/img/login-bg.jpg);
		background-repeat: no-repeat;
		background-size:cover;
		background-position: 50% 0;
		/*filter: url(blur.svg#blur);*/
		/*FireFox, Chrome, Opera*/ 
		/*webkit-filter: blur(15px)*/
		/* Chrome, Opera */
		/*-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
		/* IE6~IE9 */
		 /*filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
		filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);*/
		/* IE6~IE9 */
		z-index: -1;
	}
	
	.zy-title {
		line-height: 80px;
    	font-size: 18px;
    	color: #fff;
    	padding: 5px 15px;
    	text-align: center;
	}
	
	.zy-login {
		padding: 0 15px;
	}
	
	.zy-login .el-form-item.is-required .el-form-item__label:before {
		color: #fff !important;
	}
	
	.el-form-item__content {
		margin-left: 0;
	}
	.beijing {
		
		
	}
	.ueselogin{
		color: #fff;
		line-height: 60px;
		text-align: center;
	}
	.loginDiv{
		z-index: 9999;
		background: url(../../../static/img/sl-0.png) repeat-x 0 0;
    	background-size: auto 100%;
		height: 340px;
		border-radius: 6px;
		overflow: hidden;
		width: 350px;
		position: absolute;
		top:40%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.tile{
		height: 41px !important;
		position: relative;
		margin-bottom: 25px;
	}
	.tile .el-input__inner{
		text-indent: 40px;
	}
	.tile .spans{
		position: absolute;
		left: 20px;
		top: 10px;
		z-index: 99;
		height: 18px;
		width: 18px;
		border-right: 1px solid #999;
	}
	.tile .spans img{
		position: absolute;
		height: 18px;
		width: 18px;
		left: -10px;
		top: 0px;
	}
	.tile .el-input__inner{
		height: 40px;
	}
	.copyRight{
		position: absolute;
		bottom: 30px;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
	}
</style>